<template>
  <div class="ql-snow">
    <QuillEditor
      class="info-editor"
      v-model="content"
      ref="QuillEditor"
      :options="editorOption"
    />
    <input style="display: none" type="file" id="imgUp" @change="readFile" />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote', 'code-block'],
  ['image', 'link']
]
export default {
  name: 'editor',
  components: {
    QuillEditor: quillEditor
  },
  props: {
    question: {
      type: String
    }
  },
  data () {
    return {
    // 富文本编辑器配置
      content: '',
      editorOption: {
        placeholder: '请输入编辑内容',
        theme: 'snow', // 主题风格
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // console.log(value)
                  document.querySelector('#imgUp').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 监听文件域change事件，有图片就把图片显示到输入框中
    readFile(e) {
      console.log(1)
      const picInfo = e.target.files[0]
      const img = document.createElement('img')
      img.src = URL.createObjectURL(picInfo)
      const p = document.querySelector('.ql-editor p')
      p.appendChild(img)
    }
  },
  watch: {
    question(newVal) {
      this.content = newVal
    }
  }
}
</script>

<style>
</style>
